<template>
  <div class="box_context">
    <div class="user_box">
      <div class="search_box">
        <a-input
          v-model:value="value"
          placeholder="请输入内容......."
          :bordered="false"
          class="serach_input"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>
      </div>
      <div class="user_list_01">
        <ClientOnly>
          <VBSmooth>
            <UserListItem
              :face-img="item.user.headPhoto"
              :title="item.user.cetName"
              :sub-title="item.message.context"
              :time="initTime(item.message.createdTime)"
              v-for="item in userList"
              :isActive="item.user.id == selectUserId"
              :key="item.user.id"
              :cont="item.isWei"
              @click="userItemClick(item.user.id)"
            ></UserListItem>
          </VBSmooth>
        </ClientOnly>
      </div>
    </div>
    <div class="no_box" v-if="!selectUserId">暂无数据</div>
    <div class="box_right" v-else>
      <div class="title">
        <div class="faceImg">
          <a-avatar class="avatar" :size="50">
            <template #icon>
              <img :src="selectUser.headPhoto" />
            </template>
          </a-avatar>
        </div>
        <div class="title_context">
          <div class="cetName">{{ selectUser.cetName }}</div>
          <!-- <div class="sub_title">离线</div> -->
        </div>
        <div class="operation">
          <a-button type="link">
            <UserDeleteOutlined />
          </a-button>
        </div>
      </div>
      <div class="message_context_box" id="my_scorll">
        <MessageItem
          v-for="(item, index) in messageList"
          :key="index"
          :cet-name="
              item.sendUserId == selectUserId
                ? selectUser.cetName
                : userInfo!.cetName
            "
          :face-img="item.sendUserId == selectUserId
                ? selectUser.headPhoto
                : userInfo!.headPhoto"
          :message="item.context"
          :position="
            item.type == 'system'
              ? 'center'
              : item.sendUserId == selectUserId
              ? 'left'
              : 'right'
          "
        ></MessageItem>
      </div>
      <div class="input_bux">
        <a-input v-model:value="messageValue" placeholder="请输入内容......." />
        <a-button type="link"> <SmileOutlined class="icon" /></a-button>
        <a-button type="link" @click="sendClick">
          <SendOutlined class="icon"
        /></a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  SmileOutlined,
  SendOutlined,
  SearchOutlined,
  UserDeleteOutlined,
} from "@ant-design/icons-vue/lib/icons";
import VBSmooth from "vb-smooth";
import { useUserInfo } from "~~/store/userInfo.store";
import { useMessageUserList } from "~~/store/messageUser.store";
import { useUserMessageList } from "~~/store/userMessage.store";
import { Message, MessageUser, UserMessage } from "~~/types";
import { UserInterface } from "~~/types/user.interface";

useHead({
  title: "消息中心",
});

let userInfo = ref<UserInterface | null>(null);
let value = ref<string>("");
let messageValue = ref<string>("");

let userMessageListStore = useUserMessageList();
let messageUserListStore = useMessageUserList();

let userList = computed(() => {
  if (value.value == "") return messageUserListStore.getUserList;
  return messageUserListStore.getUserList.filter((item: MessageUser) => {
    if (item.user.cetName.indexOf(value.value) != -1) return true;
    return false;
  });
});

let selectUserId = computed(() => {
  return userMessageListStore.getGetSelectUserId;
});

let messageList = computed(() => {
  return userMessageListStore.getUserMessage?.messages ?? [];
});

let selectUser = computed(() => {
  return (
    userMessageListStore.getUserMessage?.friend ?? {
      id: "",
      userName: "",
      passWord: "",
      cetName: "",
      mobile: "",
      eMail: "",
      headPhoto: "",
    }
  );
});

const userItemClick = async (friendId: string) => {
  let { data } = await useMyFetch<UserMessage>("/userMessage", {
    body: {
      friendId: friendId,
      userId: userInfo.value?.id ?? "",
    },
    method: "POST",
  });
  if (!data) return;
  userMessageListStore.setSelectUserId(friendId);
  userMessageListStore.setUserMessage(data);
  let flg = messageUserListStore.getUserList.map((item: MessageUser) => {
    if (item.user.id == friendId) item.isWei = 0;
    return item;
  });
  messageUserListStore.setUserList(flg);
};
onMounted(() => {
  userInfo.value = useUserInfo().getUserInfo;
  if (userMessageListStore.selectUserId) {
    userItemClick(userMessageListStore.selectUserId);
  }
});

onUnmounted(() => {
  userMessageListStore.selectUserId = "";
  userMessageListStore.userMessage = null;
});

const sendClick = async () => {
  if (messageValue.value == "") return;
  let context: string = JSON.parse(JSON.stringify(messageValue.value));
  let { data } = await useMyFetch("/userMessage/sendMessage", {
    method: "POST",
    body: {
      sendUserId: userInfo.value?.id ?? "",
      onUserId: selectUserId,
      context: context,
      type: "text",
    },
  });
  if (!data) return;
  let messageUtils: Message = {
    context: context,
    type: "text",
    createdTime: new Date().toString(),
    sendUserId: userInfo.value?.id ?? "",
  };
  let messageUserList = useMessageUserList();
  messageUserList.setUserList(
    messageUserList.getUserList.map((item: MessageUser) => {
      if (item.user.id == selectUserId.value)
        item.message = {
          ...messageUtils,
          id: "",
          updatedTime: "",
        };
      return item;
    })
  );
  userMessageListStore.setMessageListItem(messageUtils);
  messageValue.value = "";
};

watch(
  () => useUserMessageList().getUserMessage?.messages.length,
  () => {
    nextTick(() => {
      let ele = document.getElementById("my_scorll")!;
      ele.scrollTop = ele.scrollHeight;
      console.log(ele.scrollTop);
    });
  }
);
</script>

<style scoped lang="scss">
.box_context {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .user_box {
    width: 350px;
    background: #402e58;
    display: flex;
    flex-direction: column;

    .search_box {
      height: 80px;
      padding: 20px;
      display: flex;
      border-bottom: 1px solid #35244e;
      .serach_input {
        background-color: #35244e;
        border: none;
        border-radius: 15px;
        height: 30px;
        font-size: 14px;
        color: #71608a;

        :deep(input) {
          color: #71608a;
        }

        ::-webkit-input-placeholder {
          color: #71608a;
          font-size: 12px;
        }
      }

      .ant-input-affix-wrapper:focus {
        border: none;
        box-shadow: none;
        outline: 0;
      }
    }

    .user_list_01 {
      flex: 1;
      position: relative;
      :deep(#smooth-layer) {
        position: absolute !important;
      }
      :deep(.scrollbar-track) {
        background-color: #695681;
      }
    }
  }
  .no_box {
    width: calc(100% - 350px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box_right {
    width: calc(100% - 350px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      height: 80px;
      padding: 0 30px;
      display: flex;
      align-items: center;
      .faceImg {
        width: 80px;
      }
      .title_context {
        flex: 1;
        .cetName {
          font-size: 14px;
          font-weight: 800;
        }
        .sub_title {
          font-size: 12px;
        }
      }
      .operation {
        padding: 0 20px;
        > .ant-btn {
          color: #000;
          width: 100%;
          font-size: 20px;
          margin: 0;
          padding: 0;
        }
      }
    }
    .message_context_box {
      width: 100%;
      height: calc(100% - 200px);
      background: #e5e5fe;
      overflow: hidden;
      overflow-y: auto;
      padding: 20px;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
    }
    //滚动条的宽度
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: #e4e4e4;
      border-radius: 3px;
    }
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #a1a3a9;
      border-radius: 3px;
    }
    .input_bux {
      padding: 0 30px;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .ant-input {
        border: none;
      }
      .ant-input:focus {
        border: none;
        box-shadow: none;
        outline: 0;
      }
      .icon {
        color: #979797;
        font-size: 20px;
        font-weight: 800;
      }
    }
  }
}
</style>
